import Header from "../../components/Header/Header.tsx";
import {
  Avatar,
  Button,
  Card,
  Divider,
  Flex,
  message,
  Space,
  Tooltip,
} from "antd";
import { CalendarDot, Download, Female, Male } from "@icon-park/react";
import {
  CopyOutlined,
  ShareAltOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { useSelector } from "react-redux";
import { RootState } from "../../store";
import { useLocation, useNavigate } from "react-router-dom";
import { AddressPath } from "../../constant/Address.ts";
import { useEffect, useState } from "react";
import QRCode from "qrcode";
import downloadBase64Image from "../../utils/DownloadBase64Image.ts"; // 引入 qrcode 库

export default function UserInfo() {
  const navigate = useNavigate();
  const location = useLocation();
  const [qrCodeDataUrl, setQrCodeDataUrl] = useState(""); // 用来存储二维码的 data URL

  // location.pathname 给出当前的路由路径
  const fullPath = AddressPath + location.pathname;

  useEffect(() => {
    QRCode.toDataURL(fullPath, { margin: 0 })
      .then((url) => {
        setQrCodeDataUrl(url); // 存储二维码图片的 Data URL
      })
      .catch((err) => {
        console.error("生成二维码失败", err);
      });
  }, []);
  // 使用 qrcode 库生成二维码的 data URL
  //初始用户信息;

  const userInfo = useSelector((state: RootState) => state.loginUser);
  const createTime = userInfo.createTime.substring(0, 4);
  return (
    <>
      <Header></Header>
      <div className={"userInfo pl-2 pr-2"}>
        <Flex>
          <Card style={{ width: 1400 }} className={"m-auto"}>
            <div className="flex justify-between">
              <div className="flex">
                <Avatar
                  size={100}
                  src={userInfo == null ? <UserOutlined /> : userInfo.avatarUrl}
                  className={"cursor-pointer"}
                ></Avatar>
                <div className="ml-10">
                  <h2 className="text-xl sm:text-lg lg:text-2xl font-bold">
                    {userInfo.nickName == null ? "未命名" : userInfo.nickName}
                  </h2>
                  <p className={"pt-2 text-gray-400"}>
                    {userInfo.userProfile == null
                      ? "未命名"
                      : userInfo.userProfile}
                  </p>
                  <div className={"mt-2 flex"}>
                    <Space size={"middle"}>
                      <div
                        className={
                          "w-12 flex items-center justify-around bg-gray-100 p-1 rounded-3xl"
                        }
                      >
                        {userInfo.gender == 0 ? (
                          <Female theme="outline" size="20" fill="#ff4500" />
                        ) : (
                          <Male theme="outline" size="24" fill="#117eff" />
                        )}
                        <p className={"pl-1 text-sm"}>
                          {userInfo.gender == 0 ? "女" : "男"}
                        </p>
                      </div>
                      <div
                        className={
                          "w-55 flex items-center justify-around bg-gray-100 p-1 rounded-3xl"
                        }
                      >
                        <CalendarDot theme="outline" size="20" fill="#6b7280" />
                        <p className={"pl-1 text-sm"}>{createTime}</p>
                      </div>
                    </Space>
                  </div>
                </div>
              </div>
              <div className={"hidden xl:block"}>
                <Tooltip
                  title={
                    <div
                      style={{ textAlign: "center" }}
                      className={"flex items-center flex-col justify-center"}
                    >
                      <img
                        src={qrCodeDataUrl}
                        alt="二维码"
                        style={{
                          width: 200,
                          height: 200,
                          display: "block", // 防止图片下方出现空隙
                          marginBottom: 10, // 图片与按钮之间的间距
                        }}
                        className={"mt-4"}
                      />
                      {/* 显示链接和复制按钮 */}
                      <div>
                        <p
                          className={"text-gray-800 truncate ml-2"}
                          style={{ width: 200 }}
                        >
                          {fullPath == AddressPath ? "" : fullPath}
                        </p>
                        <div className={"mt-2"}>
                          <Button
                            icon={<CopyOutlined />}
                            size="small"
                            style={{ marginLeft: 8 }}
                            onClick={() => {
                              navigator.clipboard
                                .writeText(fullPath)
                                .then(() => {
                                  message.success("复制链接成功");
                                })
                                .catch((err) => {
                                  message.error("复制链接失败" + err);
                                });
                            }}
                          >
                            复制链接
                          </Button>
                          <Button
                            icon={<Download theme="outline" fill="#fff" />}
                            size="small"
                            variant="solid"
                            color="primary"
                            style={{ marginLeft: 8 }}
                            onClick={() => {
                              downloadBase64Image(qrCodeDataUrl, "二维码.png");
                              message.success("下载成功");
                            }}
                          >
                            下载二维码
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  color="#ffffff" // 设置 Tooltip 背景颜色为白色
                  placement="top"
                >
                  <ShareAltOutlined
                    style={{ fontSize: 24, color: "#333", cursor: "pointer" }}
                  />
                </Tooltip>
              </div>
            </div>
            <div className={"xl:flex mt-4 justify-between items-center"}>
              <Space>
                <div className="flex items-center flex-wrap">
                  <div
                    className="flex items-center text-gray-800 cursor-pointer"
                    style={{ fontSize: 18 }}
                  >
                    <p className="text-gray-700">积分：</p>
                    <p className="text-gray-1000 font-bold">100分</p>
                  </div>
                  <Divider
                    type="vertical"
                    className="bg-gray-800"
                    style={{ height: 18 }}
                  />
                  <div
                    className="flex items-center text-gray-800 cursor-pointer"
                    style={{ fontSize: 18 }}
                  >
                    <p className="text-gray-700">签到：</p>
                    <p className="text-gray-1000 font-bold">100天</p>
                  </div>
                  <Divider
                    type="vertical"
                    className="bg-gray-800 "
                    style={{ height: 18 }}
                  />
                  <div
                    className="flex items-center text-gray-800 cursor-pointer"
                    style={{ fontSize: 18 }}
                  >
                    <p className="text-gray-700">排名：</p>
                    <p className="text-gray-1000 font-bold">100名</p>
                  </div>
                </div>
              </Space>
              <div className={"mt-2 xl:mt-0"}>
                <Space>
                  <Button
                    color="primary"
                    variant="outlined"
                    style={{ borderRadius: 3 }}
                    onClick={() => {
                      navigate("/editUserInfo");
                    }}
                  >
                    修改资料
                  </Button>
                  <Button
                    color="primary"
                    variant="solid"
                    style={{ borderRadius: 3 }}
                    onClick={() => {
                      navigate("/editUserInfo");
                    }}
                  >
                    查看信息
                  </Button>
                </Space>
              </div>
            </div>
          </Card>
        </Flex>
      </div>
    </>
  );
}
